<template>
  <div id="queryTable">
    <div class="backIcon" @click="backTongjitu"><i class="el-icon-arrow-left"></i>&nbsp;返回</div>
    <div id="table-container" v-if="tableData.tableData">
      <h2>{{tableData.tableName}}</h2>
      <el-table
        :data="queryTableData.tableData"
        border
        height="720"
        size="mini"
        ref="table"
        style="width: 100%">
        <el-table-column
          v-for="(item ,index) in queryTableData.tableLegend"
          :key ="index"
          :min-width="item.width"
          :prop="item.value"
          :label="item.name+(item.idenType==2?(item.unit?'('+item.unit+')':'(-)'):'')">
        </el-table-column>
      </el-table>
    </div>

    <h1 style="text-align:center" v-else >暂无数据</h1>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "QueryTable",
  props:['tableData'],
  data(){
      return {
        queryTableData:{},
        tableWidth:[]
      }
        
  },
  computed: {
    ...mapState({
      showmacroqueryall: state => state.micro.showmacroqueryall,
      showFastCollectLayer: state => state.micro.showFastCollectLayer,
      showTypeTabLayer: state => state.micro.showTypeTabLayer,
      showTableLayer: state => state.micro.showTableLayer,
      showMicroQueryResult: state => state.micro.showMicroQueryResult,
      showQueryTableLayer: state => state.micro.showQueryTableLayer,
      queryTable: state => state.micro.queryTable
    })
  },
  mounted(){
    if(this.tableData.tableName){
      this.queryTableData = this.tableData;
      if(this.queryTableData.tableData.length){
          this.queryTableData.tableData.map(item=>{
            if(this.queryTableData.tableLegend.length){
              this.queryTableData.tableLegend.map(ite=>{
                if(!item[ite.value] && item[ite.value] != "0"){
                  item[ite.value] = "-"
                }
                if(item.ANAME == "-"){
                  item.ANAME = item.NAME
                }
                return ite
              })
            }
            return item
          })
        }
    }else{
      this.queryTableData = this.queryTable
    }

    //表格设置宽度
    let data = this.queryTableData.tableData
    let header = this.queryTableData.tableLegend
    let dataLength = []
    this.queryTableData.tableLegend.map(item=>{
      let itemLength = []
    data.map((ite,i)=>{
      if(typeof ite[item.value] == "number"){
        itemLength.push(ite[item.value].toString().length / 2)   
      }else{
        itemLength.push(ite[item.value].toString().length)   
      }
    })
      itemLength.sort(function(a, b){return b - a})
      if(item.name.length < itemLength[0]){
        item.width = itemLength[0]*20
      }else{
        item.width = item.name.length*20
      }
      item.width.toString()
      return item
    })
  },
  beforeDestroy(){
    // EventBus.$off("queryTableData2222");
  },
  methods:{
    ...mapMutations([
      "changeshowmacroqueryall",
      "changeShowFastCollectLayer",
      "changeShowTypeTabLayer",
      "changeShowTableLayer",
      "changeShowMicroQueryResult",
      "changeShowQueryTableLayer",
      "changequeryTableData"
    ]),
    backTongjitu(){
      this.$store.commit("changeShowTypeTabLayer", true);
      this.$store.commit("changeShowFastCollectLayer", true);
      this.$store.commit("changeShowQueryTableLayer", false);
      this.$store.commit("changeShowTableLayer", false);
    }
  }
  
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../css/rule.scss";
#queryTable {
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1300;
  background: rgba(247,247,247,1);
  .backIcon{
    color: #3c93ec;
    margin-left: 30px;
    font-size: 16px;
    width: 80px;
    cursor: pointer;
    font-weight: 400;
    color: #555555;
    line-height: 60px;
    position: absolute;
  }
  h2{
    text-align: center;
    font-weight: bold;
    color: #222222;
    font-size: 16px;
    font-weight: bold;
    color: rgba(34,34,34,1);
    line-height: 60px;
  }
}
#table-container{
  margin:0 30px;
}
</style>
<style src="@/../node_modules/handsontable/dist/handsontable.full.css"></style>
<style rel="stylesheet/scss" lang="scss">
@import "../../css/rule.scss";
#queryTable{
  .el-table thead{
    background:#EFF2F3;
  }
  .el-table th>.cell{
    font-family:Microsoft YaHei;
    color:rgba(51,51,51,1);
  }
  .el-table--mini th{
    background: #EFF2F3;
  }
.el-table--enable-row-hover .el-table__body tr:hover > td {
    background:rgba(29,156,183,.1);
    
  }
  .el-table--enable-row-hover .el-table__body tr:hover > td > .cell{
    font-family:Microsoft YaHei;
    font-weight:400;
    color:#36A7BF;
  }
  .el-table::before,.el-table--border::after, .el-table--group::after{
    background-color:transparent;
  }
  .el-table--border{
    border-left: none;
  }
  .el-table--border td:first-child{
    border-left: 1px solid #ebeef5;
  }
  
} 
</style>